<template>
  <div>
    <ul class="small-menu">
      <li v-for="(item, i) in menus" :key="i" @click="toPath(item.path)">
        <div>
          {{ item.icon }}<span>{{ item.name }}</span>
        </div>
      </li>
      <template v-if="token">
        <li @click="smallMenu({ path: '/user' })">
          <div>
            <i class="fa fa-sign-in" aria-hidden="true"></i>
            <span>&nbsp;登录</span>
          </div>
        </li>
      </template>
      <template v-else>
        <li @click="smallMenu({ path: '/user' })">
          <div>
            <i class="fa fa-user-circle" aria-hidden="true"></i>
            <span>&nbsp;个人中心</span>
          </div>
        </li>
        <li @click="smallMenuLogout()">
          <div>
            <i class="fa fa-sign-out" aria-hidden="true"></i>
            <span>&nbsp;退出</span>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      toolbarDrawer: false,
      token: localStorage.getItem("token")
        ? localStorage.getItem("token")
        : null,
    };
  },
  methods: {
    renderMenus() {
      console.log(123)
      this.$createHttp.getMenu().then((res) => {
        if (res.code === 200) {
          let list = [];
          res.data.map((menu) => {
            if (menu.component && menu.visible) {
              list.push(menu);
            }
          });
          this.menus = list;
          this.$emit("action", list);
        }
      });
    },
    toPath(path) {
      this.$router.push({ path: path });
    },
    smallMenu(data) {
      this.$router.push(data);
      this.toolbarDrawer = false;
    },

    smallMenuLogout() {
      this.logout();
      this.toolbarDrawer = false;
    },

    logout() {
      this.$createHttp
        .logout()
        .then(() => {
          this.$store.commit("userInfo", {});
          localStorage.removeItem("token");
          this.$message({
            message: "退出登录",
          });
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 1500);
        })
        .catch((error) => {
          this.$message({
            message: error,
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
</style>
